<!DOCTYPE html>
<html>
	<head>
		<title>Freewall - jQuery plugin for creating grid layouts</title>
		<meta content="text/html; charset=utf-8" http-equiv="content-type">
		<meta name="description" content="Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nested grid layouts, metro style layouts, pinterest like layouts ... for desktop, mobile and tablet" />
		<meta name="keywords" content="javascript, dynamic, grid, layout, jquery plugin, flexible layouts, images layouts, fluid grid layouts, metro style layouts, pinterest like layouts"/>
		<meta name="og:image" content="http://vnjs.net/www/project/freewall/i/flex.png" />
		<meta name="og:description" content="Freewall is a cross-browser and responsive jQuery plugin for creating dynamic grid layouts for desktop, mobile and tablet." />
		<link rel="icon" href="favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="example/css/style.css" />
		<script type="text/javascript" src="example/js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="freewall.js"></script>
		<script type="text/javascript" src="example/js/index.js"></script>
		<script type="text/javascript">
			$(function() {
				app.setup({
					share: 1,
					color: 1,
					layout: 1,
					events: 1,
					methods: 1,
					options: 1,
					preload: 1,
					drillhole: 1
				});
			});
		</script>
		<style type="text/css">
			.free-wall {
				margin: 15px;
			}
		</style>
	</head>
	<body>
		<div class='header'>
			<div class="clearfix">
				<div class="float-left">
						<h1><a href="http://vnjs.net/www/project/freewall/">Free Wall</a></h1>
						<div class='target'>Creating dynamic grid layouts.</div>
				</div>
				<ul class="float-right reponsive-block">
					<li><a class="desktop active" data-width="auto"></a></li>
					<li><a class="tablet-landscape" data-width="1024"></a></li>
					<li><a class="tablet-portrait" data-width="768"></a></li>
					<li><a class="iphone-landscape" data-width="960"></a></li>
					<li><a class="iphone-portrait" data-width="640"></a></li>
				</ul>
			</div>
		</div>
		<div id="freewall-logo" class="free-wall-logo"></div>
		<div id="freewall" class="free-wall">
			<div class="brick size33" data-fixSize=0 >
				<div class='cover'>
					<h2>What is Freewall?</h2>
					<p>
						Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nested grid layouts, metro style layouts, pinterest like layouts ... with nice CSS3 animation effects and call back events. Freewall is all-in-one solution for creating dynamic grid layouts for desktop, mobile and tablet.
					</p>
					<h4>Some example layouts:</h4>
					<br/>
					<ul class="img-demo">
						<li>
							<a href="example/flex-grid.html" target="_blank">
								<img src="i/flex.png" width=98 height=98 />
								<h3>Flex layout</h3>
							</a>
						</li>
						<li>
							<a href="example/metro-style.html" target="_blank">
								<img src="i/metro.png" width=98 height=98 />
								<h3>Window style</h3>
							</a>
						</li>
						<li>
							<a href="example/image-layout.html" target="_blank">
								<img src="i/image.png" width=98 height=98 />
								<h3>Images layout</h3>
							</a>
						</li>
						<li>
							<a href="example/pinterest-layout.html" target="_blank">
								<img src="i/pinterest.png" width=98 height=98 />
								<h3>Pinterest layout</h3>
							</a>
						</li>
					</ul>
				</div>
			</div>

			<div class="brick size22" data-fixSize=0>
				<div class='cover'>
					<h2> How it works </h2>
					<p>
						Based on the width (or height) of a container and the width (height) of a cell unit, It will create a virtual matrix. Scaning the matrix at each cell will find a free cell around to made a free area, then try to fit a block element into it. In case no block can fit the gap, it will resize the block to fill the gap (that is one of the options).
					</p>
				</div>
			</div>

			<div class="size22" data-nested=".brick" data-fixSize=0>
				<div class="brick size11">
					<a href='https://github.com/kombai/freewall' class="fork" target="_blank"></a>
				</div>
				<div class="brick size12" data-fixSize=0>
					<div class='cover'>
						<h2>Share</h2>
						<div class="twitter-share">Twitter</div>
						<div class="google-share">Google +</div>
						<div class="facebook-share">Facebook</div>
					</div>
				</div>
				<div class="brick size11">
					<div class='cover'>
						<h2>Download</h2>
						<a href='https://github.com/kombai/freewall/archive/master.zip' target='_blank' class="download-icon">Project</a>
						<a href='https://raw.github.com/kombai/freewall/master/freewall.js' target='_blank' class="js-icon">Freewall.js</a>
					</div>
				</div>
			</div>

			<div class="donate size11">
				<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
					<input type="hidden" name="cmd" value="_s-xclick">
					<input type="hidden" name="hosted_button_id" value="SZSGB3GJ3T4VU">
					<input class="paypal" type="image" src="example/i/donate.png" border="0" name="submit" alt="">
					<div align="center">Buy me a beer :)</div>
				</form>
			</div>

			<div class="brick size36" data-fixSize=0 >
				<div class='cover'>
					<a class='float-left' href="example/getting-started.html" target="_blank">
						<h2>Getting started</h2>
						<div>
							<p> Freewall requires jQuery or Zepto framework.  It requires browsers which support CSS3 for some nice animation effects.</p>
							<pre>
								<code>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt; freewall demo getting started&lt;/title&gt;
  &lt;script src="js/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="../freewall.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
    #container {
      width: 80%;
      margin: auto;
    }
    .item {
      background: rgb(135, 199, 135);
      width: 320px;
      height: 320px;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id="container"&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
    $(function() {
      var wall = new Freewall("#container");
      wall.fitWidth();
    });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
								</code>
							</pre>
						</div>
						<div class="read-more">View detail ...</div>
					</a>
				</div>
			</div>

			<div class="brick size23">
				<div class='cover'>
					<h2>Features</h2>
					<ul>
						<li> Draggable support </li>
						<li> Direction support </li>
						<li> Custom plugin</li>
						<li> Responsive grid </li>
						<li> Gaps control </li>
						<li> Filter items </li>
						<li> CSS3 animation (js fallback) </li>
						<li> Nested grid </li>
						<li> Images grid/layout </li>
						<li> Fit container </li>
						<li> Vertical grid/layout </li>
						<li> Horizontal grid/layout </li>
						<li> Window metro style </li>
						<li> Pinterest like grid/layout </li>
					</ul>
				</div>
			</div>

			<div class="brick size23 options">
				<div class='cover' id="options">
					<div class='float-left'>
						<h2>Options</h2>
						<ul>
							<li> draggable </li>
							<li> animate </li>
							<li> cellW </li>
							<li> cellH </li>
							<li> delay </li>
							<li> fixSize </li>
							<li> gutterX </li>
							<li> gutterY </li>
							<li> selector </li>
							<li> keepOrder </li>
							<li> cacheSize </li>
							<li> rightToLeft </li>
							<li> bottomToTop </li>
						</ul>
						<div class="read-more">View detail ...</div>
					</div>
					<div class='desc'>
						<h2>
							<span>Options</span>
						</h2>
						<h3>All options are parameters of <i>Reset</i> method</h3>
						<ul>
							<li>
								<h3> draggable : boolean </h3>
								<div>
									Default: false <br/>
									True: to make block can be drag & drop</div>
							</li>
							<li>
								<h3> animate : boolean </h3>
								<div> True: to make block move with animation</div>
							</li>

							<li>
								<h3> cellW: mix </h3>
								<div>
									Default: 100 <br/>
									The width of unit, base on it will build grid container.
									It can be a function and return value.
								</div>
								<h3> Example </h3>
									<pre>
										<code>
var wall = new Freewall('.free-wall');
wall.reset({
  selector: '.brick',
  cellW: function(width) {
      var cellWidth = width / 3;
      return cellWidth - 20;
    },
  cellH: 160
});
										</code>
									</pre>
							</li>
							<li>
								<h3> cellH: mix </h3>
								<div>
									Default: 100 <br/>
									The height of unit, base on it will build grid container.
									It can be a function and return value.
								</div>
							</li>
							<li>
								<h3> delay : number </h3>
								<div>
									Default: 0 <br/>
									The time delay for show block. It will increase by each block.
								</div>
							</li>
							<li>
								<h3> fixSize : boolean </h3>
								<div>
									Default: null <br/>
									value is null or not set let blocks can adjust and resize to fill gap<br/>
									value is 0 or false let blocks can adjust size but can't resize to fill gap.<br/>
									value is 1 or true let blocks keep the size as init, can't resize to fill gap.<br/>

									Can override the fixSize option by set data-fixSize attribute in the block.
									<h3> Example </h3>
									<pre>
										<code>
&lt;div class="brick size22" data-fixSize=true&gt;
  &lt;div class='cover'&gt;
    &lt;div class="item size12"&gt;&lt;/div&gt;
    &lt;div class="item size12"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
										</code>
									</pre>
								</div>
							</li>
							<li>
								<h3> gutterX : mixed </h3>
								<div>
									Default: 10 <br/>
									The horizon spacing between the column. Default is number, but can set it with 'auto' value.
								</div>
							</li>
							<li>
								<h3> gutterY : mixed </h3>
								<div>
									Default: 10 <br/>
									The vertical spacing between the row. Default is number, but can set it with 'auto' value.
								</div>
							</li>
							<li>
								<h3> selector : string </h3>
								<div> Get all blocks to made layout</div>
							</li>
							<li>
								<h3> Example </h3>
								<pre>
									<code>
var wall = new Freewall('.free-wall');
wall.reset({
  selector: '.brick',
  animate: true,
  cellW: 150,
  cellH: 150,
  gutterY: 10,
  gutterX: 'auto'
});
									</code>
								</pre>
							</li>
							<li>
								<h3> cacheSize : boolean </h3>
								<div>
									Default: true <br/>
									True: will caches the with and height of block for next time</div>
							</li>
							<li>
								<h3> keepOrder : boolean </h3>
								<div> Keep the order as same as HTML structure</div>
							</li>
							<li>
								<h3> rightToLeft : boolean </h3>
								<div> Default: false <br/>
									True: let layout start render from right to left</div>
							</li>
							<li>
								<h3> bottomToTop : boolean </h3>
								<div> Default: false <br/>
									True: let layout start render from bottom up to top</div>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<div class="brick size22 events">
				<div class='cover' id="events">
					<div class='float-left'>
						<h2>Events</h2>
						<div class='float-left'>
							<ul>
								<li> onGapFound </li>
								<li> onComplete </li>
								<li> onResize </li>
								<li> onBlockReady </li>
								<li> onBlockActive </li>
								<li> onBlockFinish </li>
								<li> onBlockResize </li>
								<li> onBlockMove </li>
							</ul>
						</div>
						<div class="read-more">View detail ...</div>
					</div>
					<div class='desc'>
						<h2>
							<span>Events</span>
						</h2>
						<ul>
							<li>
								<h3> onGapFound </h3>
								<div> Registry callback when a gap found.</div>
							</li>
							<li>
								<h3> onComplete </h3>
								<div> Registry callback when all block arrange.</div>
							</li>
							<li>
								<h3> onResize </h3>
								<div> Registry callback when browser resize.</div>
							</li>
							<li>
								<h3> Example </h3>
								<pre>
									<code>
var wall = new Freewall('.free-wall');
wall.reset({
  selector: '.brick',
  onResize: function() {
    this.fitWidth();
  }
});
									</code>
								</pre>
							</li>
							<li>
								<h3> onBlockReady </h3>
								<div> Fire when block adjusted.</div>
							</li>
							<li>
								<h3> onBlockActive </h3>
								<div> Fire before block show or hide in the layout.</div>
							</li>
							<li>
								<h3> onBlockFinish </h3>
								<div> Fire when block finish show or hide in the layout.</div>
							</li>
							<li>
								<h3> onBlockResize </h3>
								<div> Fire when block changes the size to fills a gap.</div>
							</li>
							<li>
								<h3> onBlockMove </h3>
								<div> Fire when block moves by dragging.</div>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<div class="brick size23 methods">
				<div class='cover' id="methods">
					<div class='float-left'>
						<h2>Methods</h2>
						<ul>
							<li> addCustomEvent </li>
							<li> appendBlock </li>
							<li> appendHoles </li>
							<li> fillHoles </li>
							<li> filter </li>
							<li> fireEvent </li>
							<li> fitHeight </li>
							<li> fitWidth </li>
							<li> fitZone </li>
							<li> fixPos </li>
							<li> fixSize </li>
							<li> prepend </li>
							<li> refresh </li>
							<li> reset </li>
							<li> setHoles </li>
							<li> unFilter </li>
						</ul>
						<div class="read-more">View detail ...</div>
					</div>
					<div class='desc'>
						<h2>
							<span>Methods</span>
						</h2>
						<ul>
							<li>
								<h3> addCustomEvent(name, handler) </h3>
								<div> Support create custom event when arrange layout</div>
							</li>
							<li>
								<h3> appendBlock(items) </h3>
								<div> Append one or more items into layout</div>
							</li>
							<li>
								<h3> appendHoles(holes) </h3>
								<div> Add one or more blank area into layout</div>
							</li>
							<li>
								<h3> fillHoles() </h3>
								<div> Let layout without gaps</div>
							</li>
							<li>
								<h3> filter(selector) </h3>
								<div> Fillter blocks to show</div>
							</li>
							<li>
								<h3> fireEvent() </h3>
								<div> Fire custom event</div>
							</li>
							<li>
								<h3> fitHeight(height) </h3>
								<div> Made the layout fit with limit height</div>
							</li>
							<li>
								<h3> fitWidth(width) </h3>
								<div> Made the layout fit with limit width</div>
							</li>
							<li>
								<h3> fitZone(width, height) </h3>
								<div> Made the layout fit with limit width and height</div>
							</li>
							<li>
								<h3> fixPos(object) </h3>
								<div> Set a block at fixed position, top/left is multiple of cell with/height</div>
							</li>
							<li>
								<h3> fixSize(object) </h3>
								<div> Set a block with special width or height</div>
								<h5> Example </h5>
								<pre>
									<code>
var wall = new Freewall('.free-wall');
var dna = $(".free-wall .flex-layout");
wall.unsetFilter();
wall.fixSize({
  block: dna,
  width: 150,
  height: 150
});
wall.fitWidth();
									</code>
								</pre>
							</li>
							<li>
								<h3> prepend(items) </h3>
								<div> Prepend one or more items into layout</div>
							</li>
							<li>
								<h3> refresh() </h3>
								<div> rearrange layout</div>
							</li>
							<li>
								<h3> reset(options) </h3>
								<div> Config options for render layout.</div>
								<h5> Example </h5>
								<pre>
									<code>
var ewall = new Freewall(demo);
var demo = $(".example");
ewall.reset({
  selector: '.cell',
  animate: true,
  delay: 20,
  cellW: 15.5,
  cellH: 15,
  gutterX: 2,
  gutterY: 2
});
ewall.fitWidth(cwidth);
									</code>
								</pre>
							</li>
							<li>
								<h3> setHoles(hole) </h3>
								<div> Set the holes on layout</div>
							</li>
							<li>
								<h3> unFilter() </h3>
								<div> Made all block to show</div>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<div class="brick size12">
				<div class='cover'>
					<h2> Supports</h2>
					<ul>
						<li>Chrome</li>
						<li>Opera</li>
						<li>Safari</li>
						<li>IE 8.0+</li>
						<li>Firefox</li>
					</ul>
				</div>
			</div>

			<div class="brick size11">
				<div class='cover'>
					<a class="float-left" href="example/demo-filter.html" target="_blank">
						<h2> Example </h2>
						<div> Filter </div>
						<div class="read-more">View detail ...</div>
					</a>
				</div>
			</div>

			<div class="brick size11">
				<div class='cover'>
					<a class="float-left" href="example/append-more.html" target="_blank">
						<h2>Example</h2>
						<div> Append item </div>
						<div class="read-more">View detail ...</div>
					</a>
				</div>
			</div>

			<div class="brick size11">
				<div class='cover'>
					<a class="float-left" href="example/prepend-example.html" target="_blank">
						<h2>Example</h2>
						<div> Prepend item </div>
						<div class="read-more">View detail ...</div>
					</a>
				</div>
			</div>

			<div class="brick size11">
				<div class='cover'>
					<a class="float-left" href="example/css-animate.html" target="_blank">
						<h2>Example</h2>
						<div> CSS3 animation </div>
						<div class="read-more">View detail ...</div>
					</a>
				</div>
			</div>

			<div class="brick size11 example-draggable" data-draggable=1>
				<div class='cover'>
					<div class="float-left">
						<h2>Example</h2>
						<div> Draggable </div>
						<a class="read-more" href="example/draggable.html" target="_blank">View detail ...</a>
					</div>
				</div>
			</div>

			<div class="brick size11">
				<div class='cover'>
					<a class="float-left" href="example/for-zepto.html" target="_blank">
						<h2>Example</h2>
						<div>For Zeptojs</div>
						<div class="read-more">View detail ...</div>
					</a>
				</div>
			</div>


			<div class="brick size12">
				<div class='cover'>
					<a class="float-left" href="example/fit-height.html" target="_blank">
						<h2>Example</h2>
						<div> Fit height </div>
						<div class="read-more">View detail ...</div>
					</a>
				</div>
			</div>

			<div class="brick size12">
				<div class='cover'>
					<a class="float-left" href="example/fit-zone.html" target="_blank">
						<h2>Example</h2>
						<div>Fit zone</div>
						<div class="read-more">View detail ...</div>
					</a>
				</div>
			</div>


			<div class="brick size21">
				<div class='cover'>
					<a class="float-left" href="example/metro-style.html" target="_blank">
						<h2>Example </h2>
						<div>Window style</div>
						<div class="read-more">View detail ...</div>
					</a>
				</div>
			</div>

			<div class="brick size11">
				<div class='cover'>
					<a class="float-left" href="example/image-layout.html" target="_blank">
						<h2>Example</h2>
						<div>Images layout</div>
						<div class="read-more">View detail ...</div>
					</a>
				</div>
			</div>

			<div class="brick size11">
				<div class='cover'>
					<a class="float-left" href="example/pinterest-layout.html" target="_blank">
						<h2>Example </h2>
						<div>Pinterest like layout</div>
						<div class="read-more">View detail ...</div>
					</a>
				</div>
			</div>

			<div class="brick size21">
				<div class='cover'>
					<a class="float-left" href="example/flex-grid.html" target="_blank">
						<h2>Example</h2>
						<div>Flexible grid</div>
						<div class="read-more">View detail ...</div>
					</a>
				</div>
			</div>

			<div class="brick size21">
				<div class='cover'>
					<a class="float-left" href="example/grid-layout.html" target="_blank">
						<h2>Example</h2>
						<div>Grid layout</div>
						<div class="read-more">View detail ...</div>
					</a>
				</div>
			</div>

			<div class="brick size21">
				<div class='cover'>
					<a class="float-left" href="example/nested-grid.html" target="_blank">
						<h2>Example</h2>
						<div>Nested grid</div>
						<div class="read-more">View detail ...</div>
					</a>
				</div>
			</div>

			<div class="brick size21" data-fixSize=0 >
				<div class='cover'>
					<h2>Copyright</h2>
					<p> © 2016 Minh Nguyen </p>
					<p> Released under the MIT license</p>
				</div>
			</div>
		</div>
		<div class="back-button">
			<a href="javascript:void(0)" class="back-icon"></a>
		</div>
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-44036587-1']);
			_gaq.push(['_trackPageview']);

			(function() {
				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			})();
		</script>
	</body>
</html>
